<template>
<!--条件查询-->
  <el-form ref="queryFormRef" :inline="true" :model="queryForm" class="demo-form-inline">
    <el-form-item label="推荐类型" prop="type">
      <el-select v-model="queryForm.type" placeholder="type" style="width: 240px" clearable  >
        <el-option label="普通" :value="1" />
        <el-option label="最新" :value="2" />
        <el-option label="精选" :value="3" />
        <el-option label="首页推荐" :value="4" />
      </el-select>
    </el-form-item>
    <el-form-item label="平台类型" prop="platform">
<!--      <el-input v-model="queryForm.pid" style="width: 240px" placeholder="pid" clearable />-->
      <el-select v-model="queryForm.platform" placeholder="platform" style="width: 240px" clearable  >
<!--        <el-option label="无" :value="0" />-->
        <el-option label="ios" :value="3" />
        <el-option label="android" :value="2" />
        <el-option label="all" :value="1" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="querySubmit">查询</el-button>
      <el-button @click="queryReset">重置</el-button>
      <el-button type="success" @click="addOpen">添加</el-button>
      <el-button type="danger" @click="deleteOpen">删除</el-button>
    </el-form-item>
  </el-form>



  <el-table ref="tableRef" :data="tableList.tableData" style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="gid" label="编号" fixed="left" width="80" />
    <el-table-column prop="name" label="名称" width="100" />
    <el-table-column prop="gameicon" label="图标" width="180"  >
      <template #default="scope">
<!--         <el-image style="width: 100px; height: 100px" :src="url" :fit="fit" />-->
<!--         <el-image style="width: 100px; height: 100px" :src="tableList.tableData.gameicon" :fit="fit" />-->
        <img :src="scope.row.gameicon" style="width: 100px; height: 100px">
      </template>
    </el-table-column>
    <el-table-column prop="title" label="标题"  width="180"/>

    <el-table-column prop="size" label="大小(M)" width="180" />
    <el-table-column prop="status" label="状态" width="180" >
      <template #default="scope">
          <el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
          <el-tag v-else type="info">下线</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="typeName" label="分类" width="180" />
    <el-table-column prop="platform" label="平台类型" width="180" >
      <template #default="scope">
        <el-tag v-if="scope.row.platform == 1" type="primary">all</el-tag>
        <el-tag v-else-if="scope.row.platform == 2" type="success">android</el-tag>
        <el-tag v-else-if="scope.row.platform == 3" type="danger">ios</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="downloadCount" label="下载量" width="180" />
    <el-table-column prop="androidurl" label="安卓下载地址" width="260" >
      <template #default="scope">
<!--        <el-text type="warning" @click="downloadCountFun(scope.row.gid)">{{ scope.row.androidurl }}</el-text>-->
        <div>
          <el-link href="scope.row.androidurl" @click="downloadCountFun(scope.row.gid)" target="_blank">{{ scope.row.androidurl }}</el-link>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="iosurl" label="苹果下载地址" width="260" >
      <template #default="scope">
<!--        <el-text type="warning" @click="downloadCountFun(scope.row.gid)">{{ scope.row.iosurl }}</el-text>-->
        <div>
          <el-link href="scope.row.iosurl" @click="downloadCountFun(scope.row.gid)" target="_blank">{{ scope.row.iosurl }}</el-link>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="recomType" label="推荐类型" width="180" >
      <template #default="scope">
        <el-tag v-if="scope.row.recomType == 1" type="info">普通</el-tag>
        <el-tag v-else-if="scope.row.recomType == 2" type="primary">最新</el-tag>
        <el-tag v-else-if="scope.row.recomType == 3" type="warning">精选</el-tag>
        <el-tag v-else-if="scope.row.recomType == 4" type="danger">首页推荐</el-tag>
      </template>
    </el-table-column>
<!--    <el-table-column prop="pid" label="上级编号" >-->
<!--      <template #default="scope">-->
<!--        <el-tag v-if="scope.row.pid == 0" type="success">{{ scope.row.pid }}</el-tag>-->
<!--        <el-tag v-else type="warning">{{ scope.row.pid }}</el-tag>-->
<!--      </template>-->
<!--    </el-table-column>-->
<!--    <el-table-column prop="pname" label="上级名称" >-->
<!--      <template #default="scope">-->
<!--        <el-tag v-if="scope.row.pid == 0" type="success">{{ scope.row.pname }}</el-tag>-->
<!--        <el-tag v-else type="warning">{{ scope.row.pname }}</el-tag>-->
<!--      </template>-->

<!--    </el-table-column>-->
<!--    <el-table-column prop="url" label="访问地址" />-->
<!--    <el-table-column prop="glyphicon" label="图标" >-->
<!--      <template #default="scope">-->
<!--        <el-tag> <el-icon>  <component :is="scope.row.glyphicon" /></el-icon> </el-tag>-->
<!--        <el-tag>{{scope.row.glyphicon}}</el-tag>-->
<!--      </template>-->
<!--    </el-table-column>-->

    <el-table-column  label="操作" fixed="right" width="90">
      <template #default="scope">
        <el-button type="warning" @click="updateOpen(scope.row)">修改</el-button>
      </template>
    </el-table-column>
    <el-table-column  label="操作" fixed="right" width="90">
      <template #default="scope">
        <el-button type="warning" @click="del(scope.row.gid)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:current-page="pageInfo.pageData.page"
      v-model:page-size="pageInfo.pageData.pageSize"
      :total="pageInfo.pageData.total"
      :page-sizes="[3, 5, 10]"

      layout="total, sizes, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"

  />


<!--  <el-table ref="tableRef" :data="tableList.tableData" style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="name" label="名称"  />
    <el-table-column prop="title" label="标题"  />
    <el-table-column prop="downloadCount" label="下载量"  />
    <el-table-column prop="size" label="大小(M)"  />
    <el-table-column prop="status" label="状态"  >
      <template #default="scope">
          <el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
          <el-tag v-else type="info">下线</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="typeName" label="分类"  />
    <el-table-column prop="platform" label="平台类型"  >
      <template #default="scope">
        <el-tag v-if="scope.row.platform == 1" type="primary">all</el-tag>
        <el-tag v-else-if="scope.row.platform == 2" type="success">android</el-tag>
        <el-tag v-else-if="scope.row.platform == 3" type="danger">ios</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="recomType" label="推荐类型"  >
      <template #default="scope">
        <el-tag v-if="scope.row.recomType == 1" type="info">普通</el-tag>
        <el-tag v-else-if="scope.row.recomType == 2" type="primary">最新</el-tag>
        <el-tag v-else-if="scope.row.recomType == 3" type="warning">精选</el-tag>
        <el-tag v-else-if="scope.row.recomType == 4" type="danger">首页推荐</el-tag>
      </template>
    </el-table-column>-->
  <el-dialog
      v-model="addDialogVisible"
      title="添加"
      width="500"
  >
<!--name:'',
  title:'',
  status:'',
  typeName:'',
  platform:'',
  recomType:'',-->
    <el-form ref="addFormRef"  :model="addForm.addData" label-width="90" >
      <el-form-item label="名称" prop="name" >
        <el-input v-model="addForm.addData.name" placeholder="name" />
      </el-form-item>
      <el-form-item label="标题" prop="title" >
        <el-input v-model="addForm.addData.title" placeholder="title" />
      </el-form-item>
      <el-form-item label="描述" prop="des" >
        <el-input v-model="addForm.addData.des" placeholder="des" />
      </el-form-item>
      <el-form-item label="游戏演示图片" prop="picture" >
        <!--        <el-input v-model="addForm.addData.headImg" placeholder="headImg" />-->
        <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :http-request="myUpload3"
        >
          <img v-if="addForm.addData.picture" :src="addForm.addData.picture" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>


      </el-form-item>
      <el-form-item label="大小(M)" prop="size" >
        <el-input v-model="addForm.addData.size" placeholder="size" />
      </el-form-item>
      <el-form-item label="状态" prop="status" >
        <el-select v-model="addForm.addData.status" placeholder="status" style="width: 240px" clearable  >
          <el-option label="启用" :value="1" />
          <el-option label="下线" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="分类" prop="tid" >
        <el-select v-model="addForm.addData.tid" placeholder="tid" style="width: 240px" clearable  >
          <el-option label="休闲益智" :value="1" />
          <el-option label="棋牌中心" :value="2" />
          <el-option label="动作冒险" :value="3" />
          <el-option label="网络游戏" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="平台类型" prop="platform" >
        <el-select v-model="addForm.addData.platform" placeholder="platform" style="width: 240px" clearable  >
          <el-option label="ios" :value="3" />
          <el-option label="android" :value="2" />
          <el-option label="all" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="安卓下载地址" prop="androidurl" >
        <el-input v-model="addForm.addData.androidurl" placeholder="androidurl" />
      </el-form-item>
      <el-form-item label="苹果下载地址" prop="iosurl" >
        <el-input v-model="addForm.addData.iosurl" placeholder="iosurl" />
      </el-form-item>
      <el-form-item label="推荐类型" prop="recomType" >
        <el-select v-model="addForm.addData.recomType" placeholder="recomType" style="width: 240px" clearable  >
          <el-option label="普通" :value="1" />
          <el-option label="最新" :value="2" />
          <el-option label="精选" :value="3" />
          <el-option label="首页推荐" :value="4" />
        </el-select>
      </el-form-item>
<!--      <el-form-item label="图标" prop="gameicon" >-->
<!--        <el-input v-model="addForm.gameicon" placeholder="gameicon" />-->
<!--      </el-form-item>-->
      <el-form-item label="游戏图标" prop="gameicon" >
        <!--        <el-input v-model="addForm.addData.headImg" placeholder="headImg" />-->
        <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :http-request="myUpload"
        >
          <img v-if="addForm.addData.gameicon" :src="addForm.addData.gameicon" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>


      </el-form-item>
<!--      <el-form-item label="下载量" prop="recomType">-->
<!--&lt;!&ndash;        <el-input v-model="addForm.pid" placeholder="pid" />&ndash;&gt;-->
<!--        <el-select v-model="addForm.pid" placeholder="pid" style="width: 100%" >-->
<!--          <el-option label="无" :value="0" />-->
<!--          <el-option v-for="menu in optionList.optionData" :label="menu.menuname" :value="menu.mid" />-->

<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="访问地址" prop="url">-->
<!--        <el-input v-model="addForm.url" placeholder="url" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="菜单图标" prop="glyphicon">-->
<!--&lt;!&ndash;        <el-input v-model="addForm.glyphicon" placeholder="glyphicon" />&ndash;&gt;-->
<!--        <el-select v-model="addForm.glyphicon" placeholder="glyphicon" style="width: 100%" >-->
<!--          <el-option value="Odometer" >-->
<!--            <span style="float: left">-->
<!--              <el-icon><Odometer /></el-icon>-->
<!--              Odometer-->
<!--            </span>-->
<!--          </el-option>-->
<!--          <el-option value="RefreshRight" >-->
<!--            <span style="float: left">-->
<!--              <el-icon><RefreshRight /></el-icon>-->
<!--              RefreshRight-->
<!--            </span>-->
<!--          </el-option>-->
<!--          <el-option value="EditPen" >-->
<!--            <span style="float: left">-->
<!--              <el-icon><EditPen /></el-icon>-->
<!--              EditPen-->
<!--            </span>-->
<!--          </el-option>-->


<!--        </el-select>-->
<!--      </el-form-item>-->

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetAdd">重置</el-button>
        <el-button type="primary" @click="addSubmit">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
      v-model="updateDialogVisible"
      title="修改"
      width="500"
  >
<!-- name:'',
    title:'',
    size:'',
    status:'',
    tid:'',
    platform:'',
    recomType:'',
    gameicon:'',
    androidurl:'',
    iosurl:''-->
    <el-form ref="updateFormRef"  :model="updateForm.updateData" label-width="90" >
      <el-form-item label="名称" prop="mid" >
        <el-input  v-model="updateForm.updateData.name" placeholder="name" />
      </el-form-item>
      <el-form-item label="标题" prop="title" >
        <el-input v-model="updateForm.updateData.title" placeholder="title" />
      </el-form-item>
      <el-form-item label="描述" prop="des" >
        <el-input v-model="updateForm.updateData.des" placeholder="des" />
      </el-form-item>
      <el-form-item label="大小(M)" prop="size" >
        <el-input v-model="updateForm.updateData.size" placeholder="size" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="updateForm.updateData.status" placeholder="status" style="width: 240px" clearable  >
          <el-option label="启用" :value="1" />
          <el-option label="下线" :value="0" />
        </el-select>
        <!--        <el-input v-model="updateForm.pid" placeholder="pid" />-->
<!--        <el-select v-model="updateForm.updateData.status" placeholder="status" style="width: 100%" >-->

<!--&lt;!&ndash;          <el-option v-if="status in optionList.optionData" :label="status" :value="status" />&ndash;&gt;-->
<!--&lt;!&ndash;//???status如何将拿到的数字转为汉字&ndash;&gt;-->
<!--        </el-select>-->
      </el-form-item>
<!--      <el-form-item label="上级编号" prop="pid">-->
<!--        &lt;!&ndash;        <el-input v-model="updateForm.pid" placeholder="pid" />&ndash;&gt;-->
<!--        <el-select v-model="updateForm.updateData.pid" placeholder="pid" style="width: 100%" >-->
<!--          <el-option label="无" :value="0" />-->
<!--          <el-option v-for="menu in optionList.optionData" :label="menu.menuname" :value="menu.mid" />-->

<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label="游戏类型" prop="tid">
        <el-select v-model="updateForm.updateData.tid" placeholder="游戏类型" style="width: 240px" clearable  >
          <el-option label="休闲益智" :value="1" />
          <el-option label="棋牌中心" :value="2" />
          <el-option label="动作冒险" :value="3" />
          <el-option label="网络游戏" :value="4" />
        </el-select>
      </el-form-item>
       <el-form-item label="平台类型" prop="platform">
         <el-select v-model="updateForm.updateData.platform" placeholder="platform" style="width: 240px" clearable  >
           <el-option label="ios" :value="3" />
           <el-option label="android" :value="2" />
           <el-option label="all" :value="1" />
         </el-select>
      </el-form-item>
       <el-form-item label="安卓下载地址" prop="androidurl">
        <el-input v-model="updateForm.updateData.androidurl" placeholder="androidurl" />
      </el-form-item>
       <el-form-item label="苹果下载地址" prop="iosurl">
        <el-input v-model="updateForm.updateData.iosurl" placeholder="iosurl" />
      </el-form-item>
      <el-form-item label="推荐类型" prop="recomType">
        <el-select v-model="updateForm.updateData.recomType" placeholder="recomType" style="width: 240px" clearable  >
          <el-option label="首页推荐" :value="4" />
          <el-option label="精选" :value="3" />
          <el-option label="最新" :value="2" />
          <el-option label="普通" :value="1" />
<!--          <template #default="scope">
        <el-tag v-if="scope.row.recomType == 1" type="info">普通</el-tag>
        <el-tag v-else-if="scope.row.recomType == 2" type="primary">最新</el-tag>
        <el-tag v-else-if="scope.row.recomType == 3" type="warning">精选</el-tag>
        <el-tag v-else-if="scope.row.recomType == 4" type="danger">首页推荐</el-tag>
      </template>-->
        </el-select>
      </el-form-item>
      <el-form-item label="游戏图标" prop="glyphicon">
        <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :http-request="myUpload2"
        >
          <img v-if="updateForm.updateData.gameicon" :src="updateForm.updateData.gameicon" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="游戏演示图片" prop="picture">
        <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :http-request="myUpload4"
        >
          <img v-if="updateForm.updateData.picture" :src="updateForm.updateData.picture" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetupdate">重置</el-button>
        <el-button type="primary" @click="updateSubmit">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>




</template>
<script setup>
import {ref,reactive,getCurrentInstance,onMounted,nextTick} from "vue";

import { SwitchButton, Histogram,User } from '@element-plus/icons-vue'
import { ElMessage,ElMessageBox } from 'element-plus'



/*
* 公共变量
* */
const {proxy} = getCurrentInstance()

const downloadCountFun=(gid)=>{
  console.log(gid)
  proxy.$axios.get(`/games/updateByGid?gid=${gid}`)
      .then(resp=>{
        queryData()
        //处理响应图片预览
        console.log("查询数据成功!")
      })
}

/*
*
* 查询功能
* */
const tableList = reactive({tableData:[]})
const pageInfo = reactive({pageData:{
    page:1,
    pageSize:5,
    total:20
  }})

const queryForm = ref({
  platform:'',
  type:''
})
const queryFormRef = ref()

const optionList  =  reactive({optionData:[]})

const querySubmit = ()=>{
  let params = proxy.$qs.stringify(queryForm.value)
  console.log(params)


  queryData(params)
}
const queryReset = ()=>{
  queryFormRef.value.resetFields()
  queryData('')
}

const handleCurrentChange = (currentPage)=>{
  //操作对象数据
  pageInfo.pageData.page = currentPage;
  //通过qs转成url编码格式
  let params = proxy.$qs.stringify(pageInfo.pageData)
  //let params2 = proxy.$qs.stringify(queryForm.value)
  //console.log(params+'&'+params2);
  console.log(params)
  //let params = `page=${val}`
  //根据页码信息重新查询table数据//+'&'+params2
  queryData(params)
}

const handleSizeChange = (currentPageSize)=>{
  pageInfo.pageData.page = 1;
  pageInfo.pageData.pageSize = currentPageSize;
  let params = proxy.$qs.stringify(pageInfo.pageData)
  let params2 = proxy.$qs.stringify(queryForm.value)
  queryData(params+'&'+params2)
}
/*
* 添加功能
*
* */
const addFormRef = ref()
const addDialogVisible = ref(false)
const addForm = reactive({addData:{
  name:'',
  title:'',
  size:'',
  status:'',
  tid:'',
  platform:'',
  recomType:'',
  gameicon:'',
  androidurl:'',
  iosurl:'',
  des:'',
  picture:''
}})


const myUpload = (myfile)=>{

  //获取文件
  let currentFile = myfile.file;
  //创建form
  var formData = new FormData();
  //把文件放入form
  formData.append("myfile",currentFile);
  //请求使用post  传递form 设置请求头{headers: {'Content-Type': 'multipart/form-data'}}
  proxy.$axios.post("/imgUpload/upload",formData,{headers: {'Content-Type': 'multipart/form-data'}})
      .then(resp=>{

        //处理响应图片预览
        addForm.addData.gameicon = resp.data.returnData;//???
        console.log(addForm.addData.gameicon)
      })

}
const myUpload3 = (myfile)=>{

  //获取文件
  let currentFile = myfile.file;
  //创建form
  var formData = new FormData();
  //把文件放入form
  formData.append("myfile",currentFile);
  //请求使用post  传递form 设置请求头{headers: {'Content-Type': 'multipart/form-data'}}
  proxy.$axios.post("/imgUpload/upload",formData,{headers: {'Content-Type': 'multipart/form-data'}})
      .then(resp=>{

        //处理响应图片预览
        addForm.addData.picture = resp.data.returnData;//???
        console.log(addForm.addData.picture)
      })

}
const addOpen = ()=>{
  addDialogVisible.value = true;
  //执行顺序  组件延迟加载
  // if(addFormRef.value != undefined){
  //   addFormRef.value.resetFields();
  // }
  //vue提供的函数 在一次渲染后 执行指定的代码
  //渲染时机后移
  nextTick(()=>{
    addFormRef.value.resetFields();//?
  })


}
const addSubmit = ()=>{
  addDialogVisible.value = false;
  let params = proxy.$qs.stringify(addForm.addData);
  console.log(params)
  //操作数据 刷新页面数据
  operationData("games/add",params)


}
const resetAdd = ()=>{
  addFormRef.value.resetFields();
}

/*
* 修改功能
*
*
* */

const updateFormRef = ref()
const updateDialogVisible = ref(false)
const updateForm = reactive({updateData:{
    name:'',
    title:'',
    size:'',
    status:'',
    tid:'',
    platform:'',
    recomType:'',
    gameicon:'',
    androidurl:'',
    des:'',
    picture:'',
    iosurl:''
}})

let tempUpdateData = {};

const myUpload2 = (myfile)=>{

  //获取文件
  let currentFile = myfile.file;
  //创建form
  var formData = new FormData();
  //把文件放入form
  formData.append("myfile",currentFile);
  //请求使用post  传递form 设置请求头{headers: {'Content-Type': 'multipart/form-data'}}
  proxy.$axios.post("/imgUpload/upload",formData,{headers: {'Content-Type': 'multipart/form-data'}})
      .then(resp=>{
        console.log(resp.data)
        //处理响应图片预览
        console.log(resp.data.returnData)
        updateForm.updateData.gameicon = resp.data.returnData;

      })

}
const myUpload4 = (myfile)=>{

  //获取文件
  let currentFile = myfile.file;
  //创建form
  var formData = new FormData();
  //把文件放入form
  formData.append("myfile",currentFile);
  //请求使用post  传递form 设置请求头{headers: {'Content-Type': 'multipart/form-data'}}
  proxy.$axios.post("/imgUpload/upload",formData,{headers: {'Content-Type': 'multipart/form-data'}})
      .then(resp=>{
        console.log(resp.data)
        //处理响应图片预览
        console.log(resp.data.returnData)
        updateForm.updateData.picture = resp.data.returnData;

      })

}

const updateOpen = (currentRow)=>{
  updateDialogVisible.value = true
  /* 从页面直接取值
  let newJsonObj = JSON.parse(JSON.stringify(currentRow))
  //console.log(JSON.parse(JSON.stringify(currentRow)))
  updateForm.value = newJsonObj
  //console.log(currentRow)
  */
  /*从服务接口取值*/
  console.log(currentRow.gid)
  proxy.$axios.get("games/getPnGameForUpdate?gid="+currentRow.gid)
      .then(resp=>{
        console.log("--------------"+resp.data.returnData)
        updateForm.updateData = resp.data.returnData;

        console.log("-----------asda---"+resp.data)
        console.log(resp.data.returnData.platform)
        console.log(updateForm.updateData.platform)
        console.log(updateForm.updateData.name)
        tempUpdateData = JSON.parse(JSON.stringify(resp.data.returnData));
      })


}

const updateSubmit = ()=>{
  updateDialogVisible.value = false;
  let params = proxy.$qs.stringify(updateForm.updateData);
  console.log(params)

  //操作数据 刷新页面数据
  operationData("games/update",params)


}

const resetupdate = ()=>{

  updateForm.updateData = JSON.parse(JSON.stringify(tempUpdateData));

  //updateFormRef.value.resetFields();

  console.log(tempUpdateData)

}
/*
* 删除功能
*
* */
const tableRef = ref();
const del=(gid)=>{
  console.log(gid)


    ElMessageBox.confirm(
        `确定删除编号为[${gid}]的数据么`,
        '删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error',
        }
    )
        .then(() => {
          console.log('发送ajax请求删除数据')

          operationData("games/delete2","gid="+gid)


        })
        .catch(() => {
          ElMessage.info("取消删除")
        })




}
const deleteOpen = ()=>{


  let selectionRows = tableRef.value.getSelectionRows()

  if(selectionRows.length>0){
    let listGidArr = [];
    tableRef.value.getSelectionRows().forEach((data)=>{
      listGidArr.push(data.gid)
    })

    let paramStr = listGidArr.join(",")
    console.log(paramStr)

    ElMessageBox.confirm(
        `确定删除编号为[${paramStr}]的数据么`,
        '删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error',
        }
    )
        .then(() => {
          console.log('发送ajax请求删除数据')

          operationData("games/delete","listGid="+paramStr)


        })
        .catch(() => {
          ElMessage.info("取消删除")
        })
  }else{
    ElMessage.warning("请先选择数据...")
  }


}


/*
* 公共函数
* */
const queryData = (params)=>{
  proxy.$axios.get(`games/query?${params}`)
      .then((resp)=>{
        if (resp.data.returnCode == 80011){
          //给table更新数据
          tableList.tableData =resp.data.returnData
          //给分页组件更新数据
          pageInfo.pageData = resp.data.pageInfo
          console.log("---=---"+pageInfo.pageData)
          console.log(tableList.tableData)
          // queryData(params)
        }else if(resp.data.returnCode == 80012){
          //如果没有数据 保证组件正常使用
          tableList.tableData = [];
          pageInfo.pageData ={page:1,pageSize:5,total:0}
        }

      })
}
//何时调用?
const querySelect = ()=>{
  proxy.$axios.get(`games/query`)
      .then((resp)=>{
        optionList.optionData = resp.data.returnData

      })
}

const operationData=(url,params)=>{
  proxy.$axios.post(url,params)
      .then(resp=>{
        //1.弹窗显示结果
        console.log(resp.data)
        if(resp.data.returnCode == 20000){
          ElMessage.success(resp.data.returnMsg)
        }else if(resp.data.returnCode == 20001){
          ElMessage.error(resp.data.returnMsg)
        }else if(resp.data.returnCode == 20002){
          ElMessage.warning(resp.data.returnMsg)
        }
        //2.刷新数据
        //用当前查询参数查数据
        //talbe数据
        let params = proxy.$qs.stringify(pageInfo.pageData)
        let params2 = proxy.$qs.stringify(queryForm.value)
        queryData(params+'&'+params2)


        //重新查下拉列表
        // querySelect()
      })
}


onMounted(()=>{
  //页面加载完 初次加载table数据
   queryData('');
   //查询pid下拉列表数据
   //  querySelect()
})

</script>



<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>